<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>怡荭书苑</title>
    <link rel="stylesheet" href="../css/common/base.css">
    <link rel="stylesheet" href="../css/list.css">
    <script>(function flexible(c,b){var h=b.documentElement;var d=c.devicePixelRatio||1;function g(){if(b.body){b.body.style.fontSize=(12*d)+"px"}else{b.addEventListener("DOMContentLoaded",g)}}g();function e(){var i=h.clientWidth/10;h.style.fontSize=i+"px"}e();c.addEventListener("resize",e);c.addEventListener("pageshow",function(i){if(i.persisted){e()}});if(d>=2){var f=b.createElement("body");var a=b.createElement("div");a.style.border=".5px solid transparent";f.appendChild(a);h.appendChild(f);if(a.offsetHeight===1){h.classList.add("hairlines")}h.removeChild(f)}}(window,document));</script>
</head>
<body>
<div class="list-wrapper">
    <div class="head-wrapper">
        <div class="back-wrapper inline"></div>
        <div class="title-wrapper tc inline"></div>
        <div class="home-wrapper inline"></div>
    </div>
    <div class="list-content">
        <ul></ul>
    </div>
    <div class="tc" style="font-size: 12px; color: rgb(153, 153, 153); padding-bottom: 8px;">没有更多了~</div>
</div>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/libs/common.js"></script>
<script>
    $(function () {
        var type = getQueryString("type");
        if(type == -1){
            $(".title-wrapper").html("新书抢鲜");
        }else if(type == 3){
            $(".title-wrapper").html("劲爆专区");
        }
        getList(type);
        $(".back-wrapper").click(function () {
            location.href = "../index.html?channel="+getQueryString("channel");
        });
    });

    function getList(type) {
        $.ajax({
            type:'get',
            url:BASE_URl + "topic/base?channel="+getQueryString("channel")+"&type="+type+"&format=full",
            success:function (data) {
                if(data.success){
                    DrawList(data.data,getQueryString("channel"));
                }
            }
        });
    }

    function DrawList(data,channel) {
        var html = "";
        for (var i = 0;i < data.length;i ++){
            var statusHtml = "";
            if(data[i].status == "连载中"){
                statusHtml = `<span class="status updating">[${data[i].status}]：</span>`
            }else if(data[i].status == "已完结"){
                statusHtml = `<span class="status finish">[${data[i].status}]：</span>`
            }
            html += `<li onclick="goDetail('${data[i].id}',${channel})">
                    <div class="book-cover inline"><img src="${data[i].image}" alt="" width="100%" height="100%"></div>
                    <div class="book-detail inline">
                        <div class="book-name">${data[i].name}</div>
                        <div class="book-desc">
                            ` + statusHtml + `${data[i].desc}
                        </div>
                        <div class="cat-and-click clearfix">
                            <div class="cat-wrapper fl">
                                <span class="border-1px-all">${data[i].cat}</span>
                            </div>
                            <div class="click-wrapper fr">
                                <i class="inline click-icon"></i><span class="inline click">${data[i].clicks}</span>
                            </div>
                        </div>
                    </div>
               </li>`;
        }
        $(".list-content ul").html(html);
    }

    function goDetail(id,channel) {
        location.href = "./detail.html?id="+id+"&channel="+channel;
    }
</script>
</body>
</html>